<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>健康任务 - BodyGuard体重管理</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    body {
      background-color: #f5f5f5;
      height: 100vh;
      width: 100%;
      overflow: hidden;
      position: relative;
    }
    .page-content {
      height: calc(100vh - 112px);
      overflow-y: auto;
      padding-bottom: 60px;
    }
    .card-shadow {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }
    .task-icon {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
    }
    .day-circle {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.875rem;
    }
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
    }
    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      border-radius: 24px;
      transition: .3s;
    }
    .toggle-slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      border-radius: 50%;
      transition: .3s;
    }
    input:checked + .toggle-slider {
      background-color: #10b981;
    }
    input:checked + .toggle-slider:before {
      transform: translateX(20px);
    }
  </style>
</head>
<body>
  <!-- 导入状态栏和微信导航栏组件 -->
  <div id="statusbar-container"></div>
  
  <!-- 页面内容区域 -->
  <div class="page-content p-4">
    <!-- 打卡日历 -->
    <div class="bg-white rounded-xl p-4 card-shadow mb-4">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-medium">本周打卡</h2>
        <div class="text-sm text-green-600">连续打卡 5 天</div>
      </div>
      
      <div class="flex justify-between">
        <div class="text-center">
          <div class="day-circle mx-auto mb-1 bg-gray-100">一</div>
          <div class="day-circle mx-auto bg-green-100 text-green-600">
            <i class="fas fa-check text-xs"></i>
          </div>
        </div>
        <div class="text-center">
          <div class="day-circle mx-auto mb-1 bg-gray-100">二</div>
          <div class="day-circle mx-auto bg-green-100 text-green-600">
            <i class="fas fa-check text-xs"></i>
          </div>
        </div>
        <div class="text-center">
          <div class="day-circle mx-auto mb-1 bg-gray-100">三</div>
          <div class="day-circle mx-auto bg-green-100 text-green-600">
            <i class="fas fa-check text-xs"></i>
          </div>
        </div>
        <div class="text-center">
          <div class="day-circle mx-auto mb-1 bg-gray-100">四</div>
          <div class="day-circle mx-auto bg-green-100 text-green-600">
            <i class="fas fa-check text-xs"></i>
          </div>
        </div>
        <div class="text-center">
          <div class="day-circle mx-auto mb-1 bg-gray-100">五</div>
          <div class="day-circle mx-auto bg-green-100 text-green-600">
            <i class="fas fa-check text-xs"></i>
          </div>
        </div>
        <div class="text-center">
          <div class="day-circle mx-auto mb-1 bg-gray-100">六</div>
          <div class="day-circle mx-auto bg-gray-200 text-gray-400">
            <i class="fas fa-minus text-xs"></i>
          </div>
        </div>
        <div class="text-center">
          <div class="day-circle mx-auto mb-1 bg-gray-100">日</div>
          <div class="day-circle mx-auto bg-gray-200 text-gray-400">
            <i class="fas fa-minus text-xs"></i>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 今日待完成任务 -->
    <h2 class="text-lg font-medium mb-3">今日任务</h2>
    
    <div class="bg-white rounded-xl p-4 card-shadow mb-4">
      <div class="flex items-center">
        <div class="task-icon bg-green-100 text-green-500 mr-4">
          <i class="fas fa-scale-balanced"></i>
        </div>
        <div class="flex-grow">
          <div class="font-medium">体重记录</div>
          <div class="text-xs text-gray-500">每日记录体重变化</div>
          <div class="mt-1 flex items-center">
            <div class="h-1.5 bg-green-500 rounded-full w-24"></div>
            <span class="text-xs text-green-600 ml-2">已完成</span>
          </div>
        </div>
        <div class="ml-2">
          <i class="fas fa-check-circle text-green-500 text-xl"></i>
        </div>
      </div>
    </div>
    
    <div class="bg-white rounded-xl p-4 card-shadow mb-4">
      <div class="flex items-center">
        <div class="task-icon bg-blue-100 text-blue-500 mr-4">
          <i class="fas fa-glass-water"></i>
        </div>
        <div class="flex-grow">
          <div class="font-medium">喝水</div>
          <div class="text-xs text-gray-500">目标: 2000ml (8杯)</div>
          <div class="mt-1 flex items-center">
            <div class="h-1.5 bg-gray-200 rounded-full w-24 overflow-hidden">
              <div class="h-full bg-blue-500" style="width: 62.5%"></div>
            </div>
            <span class="text-xs text-gray-600 ml-2">5/8</span>
          </div>
        </div>
        <div class="ml-2">
          <button class="bg-blue-500 text-white text-xs rounded-full w-6 h-6 flex items-center justify-center">
            <i class="fas fa-plus"></i>
          </button>
        </div>
      </div>
    </div>
    
    <div class="bg-white rounded-xl p-4 card-shadow mb-4">
      <div class="flex items-center">
        <div class="task-icon bg-pink-100 text-pink-500 mr-4">
          <i class="fas fa-person-walking"></i>
        </div>
        <div class="flex-grow">
          <div class="font-medium">步行</div>
          <div class="text-xs text-gray-500">目标: 8000步</div>
          <div class="mt-1 flex items-center">
            <div class="h-1.5 bg-gray-200 rounded-full w-24 overflow-hidden">
              <div class="h-full bg-pink-500" style="width: 78%"></div>
            </div>
            <span class="text-xs text-gray-600 ml-2">6248/8000</span>
          </div>
        </div>
        <div class="ml-2">
          <i class="fas fa-sync-alt text-gray-400"></i>
        </div>
      </div>
    </div>
    
    <!-- 任务管理 -->
    <h2 class="text-lg font-medium mb-3 flex justify-between items-center">
      <span>我的任务清单</span>
      <button class="bg-green-500 text-white text-xs rounded-full px-3 py-1 flex items-center">
        <i class="fas fa-plus mr-1"></i> 添加
      </button>
    </h2>
    
    <div class="bg-white rounded-xl overflow-hidden card-shadow">
      <div class="p-4 border-b border-gray-100 flex justify-between items-center">
        <div class="flex items-center">
          <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-500 mr-3">
            <i class="fas fa-scale-balanced"></i>
          </div>
          <div>
            <div class="font-medium">体重记录</div>
            <div class="text-xs text-gray-500">每日一次</div>
          </div>
        </div>
        <label class="toggle-switch">
          <input type="checkbox" checked>
          <span class="toggle-slider"></span>
        </label>
      </div>
      
      <div class="p-4 border-b border-gray-100 flex justify-between items-center">
        <div class="flex items-center">
          <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-500 mr-3">
            <i class="fas fa-glass-water"></i>
          </div>
          <div>
            <div class="font-medium">喝水</div>
            <div class="text-xs text-gray-500">目标: 2000ml (8杯)</div>
          </div>
        </div>
        <label class="toggle-switch">
          <input type="checkbox" checked>
          <span class="toggle-slider"></span>
        </label>
      </div>
      
      <div class="p-4 border-b border-gray-100 flex justify-between items-center">
        <div class="flex items-center">
          <div class="w-10 h-10 bg-pink-100 rounded-full flex items-center justify-center text-pink-500 mr-3">
            <i class="fas fa-person-walking"></i>
          </div>
          <div>
            <div class="font-medium">步行</div>
            <div class="text-xs text-gray-500">目标: 8000步</div>
          </div>
        </div>
        <label class="toggle-switch">
          <input type="checkbox" checked>
          <span class="toggle-slider"></span>
        </label>
      </div>
      
      <div class="p-4 border-b border-gray-100 flex justify-between items-center">
        <div class="flex items-center">
          <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-500 mr-3">
            <i class="fas fa-apple-whole"></i>
          </div>
          <div>
            <div class="font-medium">吃水果</div>
            <div class="text-xs text-gray-500">每日一次</div>
          </div>
        </div>
        <label class="toggle-switch">
          <input type="checkbox">
          <span class="toggle-slider"></span>
        </label>
      </div>
      
      <div class="p-4 flex justify-between items-center">
        <div class="flex items-center">
          <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-500 mr-3">
            <i class="fas fa-bed"></i>
          </div>
          <div>
            <div class="font-medium">早睡</div>
            <div class="text-xs text-gray-500">晚11点前入睡</div>
          </div>
        </div>
        <label class="toggle-switch">
          <input type="checkbox">
          <span class="toggle-slider"></span>
        </label>
      </div>
    </div>
  </div>
  
  <!-- 导入底部导航栏组件 -->
  <div id="tabbar-container"></div>
  
  <script>
    // 加载状态栏组件
    fetch('../components/statusbar.html')
      .then(response => response.text())
      .then(data => {
        document.getElementById('statusbar-container').innerHTML = data;
      });
    
    // 加载底部导航栏组件
    fetch('../components/tabbar.html')
      .then(response => response.text())
      .then(data => {
        document.getElementById('tabbar-container').innerHTML = data;
      });
  </script>
</body>
</html> 